<template>
  <div class="login-container">
    <!-- 导航 -->
    <van-nav-bar
      class="app-nav-bar"
      title="登录"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航 -->

    <!-- 登录表单 -->
    <!-- 
      基于Vant的表单验证
      1. 使用 van-form 组件包裹所有的表单项 van-field
      2. 给 van-form 绑定 submit事件
        当表单提交的时候会触发 submit事件
        提示：只有表单验证通过，它才会调用submit。
      3. 使用 Field的rules 属性定义校验规则
     -->
    <!-- 输入框 -->
    <van-form
      :show-error="false"
      :show-error-message="false"
      :validate-first="true"
      ref="login-form"
      @submit="onLogin"
      @failed="onFormFailed"
    >
      <van-field
        v-model="user.mobile"
        name="mobile"
        icon-prefix="toutiao"
        left-icon="shouji"
        clearable
        center
        placeholder="请输入手机号"
        :rules="formRules.mobile"
      />
      <van-field
        v-model="user.code"
        name="code"
        icon-prefix="toutiao"
        left-icon="yanzhengma"
        center
        clearable
        placeholder="请输入验证码"
        :rules="formRules.code"
      >
        <template #button>
          <van-count-down 
            v-if="isShowCountDown"
            :time="5 * 1000" 
            format="ss s"
            @finish="isShowCountDown = false"
          />
          <van-button 
            v-else
            :loading="isSendSmsLoading"
            class="send-btn" 
            round 
            size="small" 
            type="primary"
            @click.prevent="onSendSms"
          >发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="info" block>登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginApi, sendSmsApi } from "@/api/user";

export default {
  name: "Login",
  components: {},
  props: {},
  data() {
    return {
      user: {
        mobile: "",
        code: "",
      },
      formRules: {
        mobile: [
          { required: true, message: "请输入手机号" },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: "手机号格式错误" },
        ],
        code: [
          { required: true, message: "请输入验证码" },
          { pattern: /^\d{6}$/, message: "验证码格式错误" },
        ],
      },
      // 控制倒计时和发送验证码按钮的显示与隐藏
      isShowCountDown: false,
      // 发送验证码的loading状态
      isSendSmsLoading: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 登录/注册请求
    async onLogin() {
      // 需引入Toast
      // Toast.loading({
      //   message: "登录中...",  //提示文本
      //   forbidClick: true,  // 禁止背景点击
      //   duration: 0 //展示时长(ms)，值为 0 时，toast 不会消失
      // });

      // 全局引入后,用this.$toast
      this.$toast.loading({
        message: "登录中...", //提示文本
        forbidClick: true, // 禁止背景点击
        duration: 0, //展示时长(ms)，值为 0 时，toast 不会消失
      });

      // 1.找到数据接口
      // 2.封装请求方法
      try {
        // 3.请求调用登录
        const {data} = await loginApi(this.user);
        // 4.处理响应结果
        this.$toast.success("登录成功");

        // 将后端返回的用户登录状态（token等数据）放到Vuex容器中
        this.$store.commit('setUser',data.data);

        if (this.$route.query.redirect) {
          //如果存在参数
          let redirect = this.$route.query.redirect
          this.$router.replace(redirect)//则跳转至进入登录页前的路由
        } else {
          this.$router.push('/')
        }
        // 清除layout的缓存，让它重新渲染
        // this.$store.commit('removeCachePage','Layout')

        // console.log("登录/注册", result);
        // this.$router.replace('/')
        // 登录成功，跳转到原来页面，但是这种方式不太好
        // this.$router.back();

        // 跳转到首页
        // const redirect = this.$router.query.redirect || '/'
        // this.$router.replace(redirect)
        
      } catch (err) {
        // console.log("登录失败", err);
        this.$toast.fail("登录失败,手机号或验证码错误");
      }
    },

    // 表单校验失败
    onFormFailed(error) {
      if (error.errors[0]) {
        this.$toast({
          // 验证失败的提示消息
          message: error.errors[0].message,
          // 防止手机键盘太高看不见提示
          position: "top",
        });
      }
    },

    // 发送验证码 async和await用法
    async onSendSms() {
      // 校验手机号，验证通过-》 请求发送验证码 -》 用户接受短信 -》 输入验证码 -》 请求登录
      // 请求发送验证码 -》隐藏发送按钮，显示倒计时
      // 倒计时结束 -》 隐藏倒计时，显示发送按钮
      // this.$refs["login-form"].validate('mobile').then(res => {
      //   console.log(res);
      // })

      // 1.校验手机号
      try {
        await this.$refs["login-form"].validate('mobile')

        // 2.手机验证通过, 请求发送验证码
        // loading状态，防止网络加载慢，以及用户多次点击
        this.isSendSmsLoading = true;
        await sendSmsApi(this.user.mobile);

        // 3.短信发送出去了，隐藏发送按钮，显示倒计时
        this.isShowCountDown = true; 
        
        // 4.倒计时结束，隐藏倒计时，显示发送按钮（监视倒计时的finish事件处理）

      } catch(error) {
        // try里面任何代码的错误都会进入catch 
        // 不同的错误需要有不同的提示，那就需要判断了。
        // console.dir(error);
        let message = "失败,请稍后再试";
        if (error && error.response && error.response.status === 429) {
          // 发送短信失败的错误提示
          message = "发送太频繁了，请稍后重试";
        } else if (error.name === "mobile") {
          // 表单验证失败的错误提示
          message = error.message;
        } else {
          // 未知错误的时候
          message = "发送失败，请稍后重试";
        }
        this.$toast({
          message: message,
          position: "top"
        })
      }
      this.isSendSmsLoading = false;
    },

    // 用Promise实现发送验证码
    // onSendSms() {
    //   // 表单验证手机号
    //   this.$refs["login-form"].validate('mobile').then(res => {
    //       // 手机号验证通过，请求发送验证码接口
    //       sendSmsApi(this.user.mobile).then(result => {
    //         console.log("发送验证码的结果",result);
    //         this.isShowCountDown = true; 
    //       }).catch(err => {
    //         let message = "发送失败，请稍后重试";
    //         if (err && err.response && err.response.status === 429) {
    //           message = "发送太频繁了，请稍后重试";
    //         } 
    //         this.$toast({
    //           message,
    //           position: "top"
    //         })
    //       });
    //   }).catch(error => {
    //     console.log("表单验证失败",error);
    //     this.$toast({
    //       message: error.message,
    //       position: "top"
    //     })
    //   })
    // }

  },
  created() {},
  mounted() {},
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.login-container {
  // .van-field__control {
  //   &:after {
  //     content: "";
  //     display: inline-block;
  //     border-right: solid !important;
  //     border-color: #ededed !important;
  //     border-width: 1px !important;
  //     height: 24px;
  //     width: 1px;
  //     border: 0.25em solid #fff;
  //     box-shadow: 0 0 0 2px #369;
  //     padding: 0 0 0 1.75em;
  //     box-sizing: border-box;
  //     font-size: 24px;
  //     line-height: 1.5em;
  //   }
  // }
  .send-btn {
    width: 76px;
    height: 24px;
    background-color: #ededed;
    border: none;
    .van-button__text {
      font-size: 11px;
      color: #666666;
    }
  }
  .login-btn-wrap {
    padding: 26px 16px; //上下  左右
    .login-btn {
      background-color: #6db4fb;
      border: none;
      .van-button__text {
        font-size: 15px;
      }
    }
  }
}
</style>